<template>
  <div class="pay">


        <div class="header">
            充值
            <div class="back" @click="$router.go(-1)">
                <svg t="1667906774151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19668" width="200" height="200"><path d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z" p-id="19669"></path></svg>
            </div>
        </div>


        <div class="msg">
            <div class="userpc">
                <img src="../assets/imgs/个人头像.jpg" alt="">
            </div>
            <div class="nmlgb">
                <div class="one">林凯琦28</div>
                <div class="two">余额: <span>{{yue}}KK币</span> </div>
            </div>
        </div>

        <!-- 充值平台 -->
        <div class="cz">
            <div :class="['item',dijige==1?'con':'']" @click="pay500">
                <div class="up">
                    <div class="imgs">
                        <img src="../assets/imgs/金币.png" alt="">
                    </div>
                    <div class="num">500</div>
                </div>
                <div class="money">$ 5.00</div>
            </div>
            <div :class="['item',dijige==2?'con':'']" @click="pay100">
                <div class="up">
                    <div class="imgs">
                        <img src="../assets/imgs/金币.png" alt="">
                    </div>
                    <div class="num">100</div>
                </div>
                <div class="money">$ 1.00</div>
            </div>
            <div :class="['item',dijige==3?'con':'']" @click="pay1200">
                <div class="up">
                    <div class="imgs">
                        <img src="../assets/imgs/金币.png" alt="">
                    </div>
                    <div class="num">1200</div>
                </div>
                <div class="money">$ 12.00</div>
            </div>
            <div :class="['item',dijige==4?'con':'']" @click="pay1000">
                <div class="up">
                    <div class="imgs">
                        <img src="../assets/imgs/金币.png" alt="">
                    </div>
                    <div class="num">1000</div>
                </div>
                <div class="money">$ 10.00</div>
            </div>
            <div :class="['item',dijige==5?'con':'']" @click="pay2000">
                <div class="up">
                    <div class="imgs">
                        <img src="../assets/imgs/金币.png" alt="">
                    </div>
                    <div class="num">2000</div>
                </div>
                <div class="money">$ 20.00</div>
            </div>
            <div :class="['item',dijige==6?'con':'']" @click="pay5000">
                <div class="up">
                    <div class="imgs">
                        <img src="../assets/imgs/金币.png" alt="">
                    </div>
                    <div class="num">5000</div>
                </div>
                <div class="money">$ 50.00</div>
            </div>
            <div :class="['item',dijige==7?'con':'']" @click="pay10000">
                <div class="up">
                    <div class="imgs">
                        <img src="../assets/imgs/金币.png" alt="">
                    </div>
                    <div class="num">10000</div>
                </div>
                <div class="money">$ 100.00</div>
            </div>
            <div :class="['item',dijige==8?'con':'']" @click="pay12800">
                <div class="up">
                    <div class="imgs">
                        <img src="../assets/imgs/金币.png" alt="">
                    </div>
                    <div class="num">12800</div>
                </div>
                <div class="money">$ 128.00</div>
            </div>
        </div>

        <!-- 方式 -->
        <div class="howto">
            支付方式
        </div>
        <div class="paybody">
            <div class="item" @click="one">
                <div class="le">
                    <svg t="1667908000395" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20303" width="200" height="200"><path d="M395.846 603.585c-3.921 1.98-7.936 2.925-12.81 2.925-10.9 0-19.791-5.85-24.764-14.625l-2.006-3.864-78.106-167.913c-0.956-1.98-0.956-3.865-0.956-5.845 0-7.83 5.928-13.68 13.863-13.68 2.965 0 5.928 0.944 8.893 2.924l91.965 64.43c6.884 3.864 14.82 6.79 23.708 6.79 4.972 0 9.85-0.945 14.822-2.926L861.71 282.479c-77.149-89.804-204.684-148.384-349.135-148.384-235.371 0-427.242 157.158-427.242 351.294 0 105.368 57.361 201.017 147.323 265.447 6.88 4.905 11.852 13.68 11.852 22.45 0 2.925-0.957 5.85-2.006 8.775-6.881 26.318-18.831 69.334-18.831 71.223-0.958 2.92-2.013 6.79-2.013 10.75 0 7.83 5.929 13.68 13.865 13.68 2.963 0 5.928-0.944 7.935-2.925l92.922-53.674c6.885-3.87 14.82-6.794 22.756-6.794 3.916 0 8.889 0.944 12.81 1.98 43.496 12.644 91.012 19.53 139.48 19.53 235.372 0 427.24-157.158 427.24-351.294 0-58.58-17.78-114.143-48.467-163.003l-491.39 280.07-2.963 1.98z" fill="#09BB07" p-id="20304"></path></svg>微信支付
                </div>
                <div class="ri">
                    <div :class="['sure',fuqian?'con':'']">

                    </div>
                </div>
            </div>
            <div class="item" @click="two">
                <div class="le">
                    <svg t="1667908214790" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21235" width="200" height="200"><path d="M902.095 652.871l-250.96-84.392s19.287-28.87 39.874-85.472c20.59-56.606 23.539-87.689 23.539-87.689l-162.454-1.339v-55.487l196.739-1.387v-39.227H552.055v-89.29h-96.358v89.294H272.133v39.227l183.564-1.304v59.513h-147.24v31.079h303.064s-3.337 25.223-14.955 56.606c-11.615 31.38-23.58 58.862-23.58 58.862s-142.3-49.804-217.285-49.804c-74.985 0-166.182 30.123-175.024 117.55-8.8 87.383 42.481 134.716 114.728 152.139 72.256 17.513 138.962-0.173 197.04-28.607 58.087-28.391 115.081-92.933 115.081-92.933l292.486 142.041c-11.932 69.3-72.067 119.914-142.387 119.844H266.37c-79.714 0.078-144.392-64.483-144.466-144.194V266.374c-0.074-79.72 64.493-144.399 144.205-144.47h491.519c79.714-0.073 144.396 64.49 144.466 144.203v386.764z m-365.76-48.895s-91.302 115.262-198.879 115.262c-107.623 0-130.218-54.767-130.218-94.155 0-39.34 22.373-82.144 113.943-88.333 91.519-6.18 215.2 67.226 215.2 67.226h-0.047z" fill="#02A9F1" p-id="21236"></path></svg>支付宝支付
                </div>
                <div class="ri">
                    <div :class="['sure',fuqian?'':'con']">

                    </div>
                </div>
            </div>
        </div>

        <div class="okbuy" @click="okbuy">
            确认支付
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            lsyue:0,
            yue:0,
            fuqian:true,
            dijige:0
        }
    },
    methods:{
        one(){
            this.fuqian=true
            
        },
        two(){
            this.fuqian = false
        },
        pay500(){
            // console.log("500")
            this.lsyue += 500
            console.log(this.lsyue)
            this.dijige = 1
        },
        pay100(){
            // console.log("500")
            this.lsyue += 100
            console.log(this.lsyue)
            this.dijige = 2
        },
        pay1200(){
            // console.log("500")
            this.lsyue += 1200
            console.log(this.lsyue)
            this.dijige = 3
        },
        pay1000(){
            // console.log("500")
            this.lsyue += 1000
            console.log(this.lsyue)
            this.dijige = 4
        },
        pay2000(){
            // console.log("500")
            this.lsyue += 2000
            console.log(this.lsyue)
            this.dijige = 5
        },
        pay5000(){
            // console.log("500")
            this.lsyue += 5000
            console.log(this.lsyue)
            this.dijige = 6
        },
        pay10000(){
            // console.log("500")
            this.lsyue += 10000
            console.log(this.lsyue)
            this.dijige = 7
        },
        pay12800(){
            // console.log("500")
            this.lsyue += 12800
            console.log(this.lsyue)
            this.dijige = 8
        },
        okbuy(){
            this.yue = this.lsyue
            window.localStorage.setItem("kkb",this.yue)
            this.dijige = 0
        },
        getDataFun(kkb){
            console.log(kkb)
        }
    },
    created(){
        // this.yue = window.localStorage.getItem("kkb")


        if(window.localStorage.getItem("kkb")!=0){
            this.lsyue = Number(window.localStorage.getItem("kkb"))
            this.yue = this.lsyue
        }else{
            this.lsyue = 0
            this.yue = this.lsyue
        }
        console.log( this.lsyue);

        // this.getDataFun(this.$route.query.kkb)
        // console.log(this.$route.query.kkb)
        // this.yue = this.getDataFun(this.$route.query.kkb)
    },
    mounted(){
        // this.yue = window.localStorage.setItem("kkb",this.yue)
    }
}
</script>

<style lang="scss">
.pay .okbuy{
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: #ff7a15;
    position: fixed;bottom: 0px;
    left: 0px;
}
.pay .paybody{
    width: 90%;
    margin: 0 auto;
    
    .item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 0;
        svg{
            width: 20px;
            height: 20px;
            margin-right: 14px;
        }
        .ri{
            width: 20px;
            height: 20px;
            .sure{
                width: 20px;
                height: 20px;
                background-color: #ffffff;
                border-radius: 50%;
                &.con{
                    background-color: #ff7a15;
                }
            }
        }
    }
}
.pay .howto{
    width: 100%;
    height: 40px;
    text-align: left;
    line-height: 40px;
    font-size: 14px;
    text-indent: 20px;
}
.pay .cz{
    display: flex;
    flex-wrap: wrap;
    .item{
        width: 27%;
        margin: 1% 3.1%;
        display: flex;
        flex-direction: column;
        height: 60px;
        border-radius: 10px;
        background-color: #f9f6ff;
        
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        &.con{
            border: 1px solid #ff8121;
        }
        .up{
            display: flex;

            .imgs{
                width: 25px;
                height: 25px;
                img{
                    width: 100%;
                }
            }
        }
        .money{
            font-size: 12px;
            color: #9999b3;
        }
    }
}
.pay .header{
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: #fff;
    position: relative;
    .back{
        width: 20px;
        height: 20px;
        position: absolute;top: 3px;
        left: 10px;
        svg{
            width: 20px;
            height: 20px;
        }
    }
}
.pay .msg{
    width: 100%;
    height: 90px;
    background-color: red;
    background: url(../assets/imgs/充钱.jpg);
    background-size: 100%;
    display: flex;
    align-items: center;
    .userpc{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        margin-left: 20px;
        img{
            width: 100%;
        }
    }
    .nmlgb{
        flex: 1;
        height: 50px;
        .one{
            height: 25px;
            line-height: 25px;
            font-size: 16px;
            color: #fff;
            margin-left: 20px;
        }
        .two{
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            color: #fff;
            margin-left: 20px;
            span{
                color: #ff7a15;
                font-size: 14px;
            }
        }
    }
}
</style>